<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .box{
        height: 300px;
        width: 600px;

        background: rgb(187, 109, 21);
    }
    .right,.left {
        width: 300px;
        height: 300px;
        float: left;
    }
    .right {
        background: rgb(79, 28, 199);
   /*      padding: 10px; */ 
   /* 
        width规定的只是内容的宽度，padding使用独立宽度，设置后，元素的宽度 = width + padding
        border 也是如此。

        使用box-sizing 
    */
    /* 
        boxsizing: 属性👇
        content-box:  width规定的只是内容的宽度，padding使用独立宽度，设置后，元素的宽度 = width + padding
        border 也是如此。
     */
     /*     
        border-box: 设置的width属性就是盒子最终的属性,添加了padding和border会使得
        内容的显示区域变小。

      */
    }
    .left {
        background: #e42121;
        box-sizing: border-box;
        border: 10px solid rgb(51, 165, 95);
        
    }
    .bordtest {
        width: 1000px;
        height: 300px;
        background: #eee;
        border-radius: 200px 300px 400px 1000px/300px 200px 400px 500px ;
    }
</style> 
<body>
    <div class="box">
        <div class="right"></div>
        <div class="left"></div>
    </div>
    <div class="bordtest">

    </div>
</body>
</html>